<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 790px;
        overflow: hidden;
        background-color: whitesmoke;
    }

    .Bracelets {
        width: 230px;
        height: 300px;
        margin: 20px 0px 20px 20px;
        text-align: center;
        background-color: #FFF;
        float: left;
        position: relative;
        top: 0;
        overflow: hidden;
        transition: all .5s;
    }

    .Bracelets:hover {
        top: -5px;
        box-shadow: 0 0 15px #AAA;
    }

    .Bracelets img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .TV {
        width: 230px;
        height: 300px;
        margin: 20px 0px 20px 20px;
        text-align: center;
        background-color: #FFF;
        float: left;
        position: relative;
        top: 0;
        overflow: hidden;
        transition: all .5s;
    }

    .TV img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .span {
        position: absolute;
        left: 0;
        bottom: -80px;
        width: 100%;
        height: 80px;
        background-color: #ff6700;
        transition: all .5s;
    }

    .TV:hover {
        top: -5px;
        box-shadow: 0 0 15px #AAA;
    }

    .TV:hover .span {
        bottom: 0;
    }

    .Phone {
        float: left;
        width: 250px;
        height: 300px;
        margin: 20px 20px 20px 20px;
        position: relative;
        top: 0;
        background-color: #FFF;
        overflow: hidden;
        transition: all .5s;
    }

    .Phone img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .Phone:hover {
        top: -5px;
        box-shadow: 0 0 15px #AAA;
    }


    .Phone:hover .span {
        bottom: 0;
    }
</style>

<body>
    <div class="box">
        <div class="Bracelets">
            <img src="https://img.haruka.net.cn/image/2024/10/24/hc8xfu.png" alt="梦葉樱图床" />
        </div>
        <div class="TV">
            <img src="https://img.haruka.net.cn/image/2024/10/24/hcnnj8.png" alt="梦葉樱图床" />
            <span class="span"></span>
        </div>
        <div class="Phone">
            <img src="https://img.haruka.net.cn/image/2024/10/24/ihrnpy-0.jpg" alt="梦葉樱图床" />
            <span class="span"></span>
        </div>
    </div>
</body>

</html>